<template>
  <div class="wh-robot" :class="{ active, out: !active }">
    <div class="wh-robot-right">
      <h3 class="fs48">人机交互，译后编辑</h3>
      <p class="fs48 mb40">机器自动学习，越用越聪明</p>
      <ul>
        <li class="mb30">云译通会对人工修改的译文进行机器学习，满足不同场景翻译表达需求</li>
        <li>译文表达更地道，让用户获得更好的翻译体验</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'robot',
  props: {
    active: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.wh-robot {
  width: 100%;
  height: 100%;
  display: flex;
  padding-left: calc(50vw);
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  //background: linear-gradient(180deg, #b8e5ea 0%, rgba(255, 255, 255, 0) 100%);

  &.active {
    > .wh-robot-right {
      h3,
      p,
      > ul > li {
        transform: translateY(0);
        opacity: 1;
      }

      h3 {
        transition: all 1s 0.3s $cubic;
      }

      p {
        transition: all 1s 0.6s $cubic;
      }

      > ul > li {
        transition: all 1s 0.9s $cubic;
      }
    }
  }

  &.out {
    > .wh-robot-right {
      h3,
      p,
      > ul > li {
        transform: translateY(40px);
        opacity: 0;
      }

      h3 {
        transition: all 1s 0.9s $cubic;
      }

      p {
        transition: all 1s 0.6s $cubic;
      }

      > ul > li {
        transition: all 1s 0.3s $cubic;
      }
    }
  }

  > .wh-robot-right {
    width: 578px;
    margin-left: 96px;

    h3,
    p {
      transform: translateY(40px);
      opacity: 0;
    }

    > ul {
      > li {
        padding-left: 30px;
        width: 459px;
        font-size: 24px;
        font-weight: 100;
        color: #6c7e94;
        line-height: 40px;
        position: relative;
        transform: translateY(40px);
        opacity: 0;

        &::after {
          content: '';
          position: absolute;
          top: 10px;
          left: 0;
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #2c8fff;
        }
      }
    }
  }
}
</style>
